iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0
Modern Web

React 學得動嗎系列 第 3

[Day 3] 使用Create React App和shadcn/ui建立React專案

  • 分享至 

  • xImage
  •  

大家好!歡迎來到React學習之旅的第三天。今天,我們將建立我們的React專案,並使用shadcn/ui來構建一個簡單美觀的UI界面。

建立專案

首先,讓我們使用Create React App建立一個新的TypeScript項目:

npx create-react-app my-react-app --template typescript
cd my-react-app

安裝和設定shadcn/ui

接下來,我們將安裝和設定shadcn/ui:

  1. 安裝必要的依賴:
npm install -D tailwindcss postcss autoprefixer
npm install @radix-ui/react-icons
npx tailwindcss init -p
  1. 設定Tailwind CSS。在tailwind.config.js中增加:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. src/index.css中增加Tailwind指令:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 安裝shadcn/ui CLI:
npm i -D @shadcn/ui
  1. 初始化shadcn/ui:
npx shadcn@latest init

建立一個簡單的計數器組件

現在,讓我們建立一個簡單的計數器組件,以展示我們在前兩天學到的React基礎知識:

src/components下建立一個新文件Counter.tsx:

import React, { useState } from 'react';
import { Button } from "@/components/ui/button"

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">計數器</h2>
      <p className="text-xl mb-4">當前計數: {count}</p>
      <div className="space-x-2">
        <Button onClick={() => setCount(count + 1)}>增加</Button>
        <Button variant="outline" onClick={() => setCount(count - 1)}>減少</Button>
      </div>
    </div>
  );
};

export default Counter;

更新App.tsx

更新src/App.tsx來使用我們的新組件:

import React from 'react';
import Counter from './components/Counter';

const App: React.FC = () => {
  return (
    <div className="container mx-auto mt-10">
      <h1 className="text-3xl font-bold mb-6">我的React應用</h1>
      <Counter />
    </div>
  );
};

export default App;

執行程式

現在,讓我們運行我們的應用:

npm start

訪問 http://localhost:3000 ,應該能看到一個簡單美觀的計數器應用。

上傳到GitHub

最後,讓我們將我們的專案上傳到GitHub:

  1. 在GitHub上建立一個新的儲存庫。
  2. 在本地專案目錄中使用Git:
git add .
git commit -m "Initial commit: Create React counter app with shadcn/ui"
git branch -M main
git remote add origin <你的GitHub儲存庫URL>
git push -u origin main

上一篇
[Day 2] React起步:從Vue開發者視角看React基礎
下一篇
[Day 4] 改用用Vite來建立React專案
系列文
React 學得動嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言